<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- .trim 自动去除首尾空格 -->
        <input type="text" v-model.trim="msg">
        <hr>
        <!-- .number  -->
        <!-- 默认情况下你从输入框拿到的数据永远都是字符串 -->
        <!-- 希望输入的内容能自动转换数值类型 -->
        <!-- 细节：它只是能帮你输入的是数字才转数字，如果输入的不是数字就输入什么就拿到什么 -->
        <input type="text" v-model.number="num">
        <p> {{ num + 100 }} </p>

        <hr>
        <!-- 默认情况下，输入框一边输入我们值就会一边跟这边 -->
        <!-- .lazy只有当你输入完了，数据才会跟着变  -->
        <!-- 什么叫输入完了？就是你按了回车或者失去焦点 -->
        <input type="text" v-model.lazy.number="msg2">
        <p>{{ msg2 + 100 }}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '',
                msg2: '',
                num: 0
            }
        })
    </script>
</body>
</html>